import {useState} from 'react'
import { message } from 'antd'
import '../index.less'
import { reqEditStuInfo } from '@/api'
import ModalForm from '@/components/ModalForm/ModalForm'

interface IEditInfo {
  stuName: string,
  stuID: number,
  stuPwd: string,
  stuAccount: string,
  school: string,
  stuClass: string,
  address: string,
  phone: number,
}

interface IProps {
  editInfo: IEditInfo
  handleFlag: any
}

function EditStu(props: IProps) {
  const [showForm,setShowForm] = useState(false)
  // 控制弹窗显隐
  const ctrlForm = () => {
    setShowForm(!showForm);
  };
  // 编辑表格数据
  const editStu = (values:any) => {
    reqEditStuInfo(values).then(res => {
      const {code, msg} = res.data
      if(code === 200) {
        message.success(msg)
      }
    })
    props.handleFlag()// 改变依赖更新父组件
    setShowForm(!showForm)    
  }

  return (
    <>
      <ModalForm
        showForm = {showForm}
        ctrlForm = {ctrlForm}
        formTitle = {'创建学生'}
        changeStu = {editStu}
        stuName = {'stu_name'}
        stuID = {'stu_ID'}
        stuPwd = {'stu_pwd'}
        stuAccount = {'stu_account'}
        stuSchool = {'stu_school'}
        stuClass = {'stu_class'}
        stuAddress = {'stu_address'}
        stuPhone = {'stu_phone'}
        stuNameInit = {props.editInfo.stuName}
        stuIDInit = {props.editInfo.stuID}
        stuPwdInit = {props.editInfo.stuPwd}
        stuAccountInit = {props.editInfo.stuAccount}
        stuSchoolInit = {props.editInfo.school}
        stuClassInit = {props.editInfo.stuClass}
        stuAddressInit = {props.editInfo.address}
        stuPhoneInit = {props.editInfo.phone}
        disabled = {true}
      />
      <span className='inner_buttons' onClick={ctrlForm}>编辑</span>
    </>
  )
}

export default EditStu